<template>
    <div>

        <!-- <el-table-v2 :columns="columns" :data="data" :width="1200" :height="600" fixed /> -->

        <el-table-v2 :columns="columns" :data="data" :row-height="70" :width="1200" :height="600" :footer-height="50">
            <template #empty>
                <div class="flex items-center justify-center h-100%">
                    <el-empty description="暂无数据" />
                </div>
            </template>
        </el-table-v2>

    </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import axios from 'axios';
import {
    ElButton,
} from 'element-plus'

const data = ref([])
const columns = [
    {
        key: 'shopName',
        title: '名称',
        dataKey: 'shopName',
        width: 150,
    },
    {
        key: 'shopTel',
        title: '电话',
        dataKey: 'shopTel',
        width: 200,
    },
    {
        key: 'shopAddress',
        title: '地址',
        dataKey: 'shopAddress',
        width: 200,
    },
    {
        key: 'operations',
        title: 'Operations',
        cellRenderer: () => (
            <>
                <ElButton size="small">Edit</ElButton>
                <ElButton size="small" type="danger">
                    Delete
                </ElButton>
            </>
        ),
        width: 150,
        align: 'center',
    },
]

// 请求数据
const getData = () => {
    axios.get('/api/list', { params: { pageSize: 500 } }).then(res => {
        console.log(res);
        data.value = res.data.data.data
    })
}

getData()

</script>